﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Shared/Shared.master" AutoEventWireup="true" CodeBehind="Album.aspx.cs" Inherits="OpenPhotoAlbum.Shared.Album" %>
<%@ Register Assembly="OpenPhotoAlbum" Namespace="OpenPhotoAlbum.Controls" TagPrefix="cc" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ph1" runat="server">
<script language="javascript" type="text/javascript">
	$addHandler(window, "load", onWindowLoad);
	function onWindowLoad() {
		loadPhotos();		// load photos
		loadAlbumList();	// load album list
	}
	function loadPhotos() {
	    var albumId = '<%= OpenPhotoAlbum.UrlContext.AlbumId %>';
	    OpenPhotoAlbum.Shared.Photos.GetPhotos(albumId, onLoadPhotoSuccess, onFailed, null);
		$get('photos').innerHTML = '<%= Resources.Strings.Shared_LoadingPhotos %>';
	}
	function onLoadPhotoSuccess(result, context) {
		var photos = Sys.Serialization.JavaScriptSerializer.deserialize(result);
		var html = new Sys.StringBuilder();
		for (var i in photos) {
		    var photo = photos[i];
			html.append('<table class="photoItem"><tr><td>');
			html.append(String.format(
				'<a href="{0}" class="thumbnail"><img src="{1}" /></a>',
				photo.SharedPhotoUrl,
				photo.PhotoPipeUrl));
			html.append(String.format('<span class="caption">{0}</span>', photo.Caption));
			html.append('</td></tr></table> ');
		}
		$('#photos').css('visiblity', 'hidden');
		$('#photos').html(html.toString()); adjust();
		$('#photos').css('visiblity', 'visible');
	}
	function loadAlbumList() {
		var userId = '<%= this.AlbumOwner.UserId %>';
		// get total page count.
		OpenPhotoAlbum.Shared.Albums.GetTotalPages(userId, true, onGetTotalPagesSuccess, onFailed, null);
	}
	function onGetTotalPagesSuccess(result, context) {

		// update the paginator.
		//
		var totalPages = result;
		var pgn = $find('<%= pgn.ClientID %>');
		if (!pgn) { return; }
		pgn.set_TotalPages(totalPages);

		var userId = '<%= this.AlbumOwner.UserId %>';
		var albumId = '<%= OpenPhotoAlbum.UrlContext.AlbumId %>';

		// get page number of current album in list.
		OpenPhotoAlbum.Shared.Albums.GetPageNumberOfAlbumInList(userId, albumId, onGetPageNumberSuccess, onFailed, null);
	}
	function onGetPageNumberSuccess(result, context) {
		var pageNumber = result;
		var userId = '<%= this.AlbumOwner.UserId %>';

		var pgn = $find('<%= pgn.ClientID %>');
		if (!pgn) { return; }
		if (pgn.get_TotalPages() < pageNumber) { return; }
		
		pgn.updateCurrentPage(pageNumber);
		pgn.renderPageInfo();
		pgn.renderButtons();

		// once got page number, load the list.
		OpenPhotoAlbum.Shared.Albums.GetAlbums(userId, pageNumber, true, onGetAlbumsSuccess, onFailed, null);
	}
	function onGetAlbumsSuccess(result, context) {

		// render the album list
		//
		var albums = Sys.Serialization.JavaScriptSerializer.deserialize(result);
		var html = new Sys.StringBuilder();
		for (var i in albums) {
			var album = albums[i];
			html.append('<div class="item">');
			var captionId = 'caption_' + i;
			html.append(String.format('<div class="caption" id="{0}">{1}</div>', captionId, album.Title));
			var imageId = 'image_' + i;
			html.append(String.format(
				'<a class="image" id="{0}" href="{4}"><img src="{1}" alt="{2}" onload="javascript:showCaptionProxy(\'{3}\',\'{0}\');" /></a>',
				imageId, album.PhotoPipeUrl, album.Title, captionId, album.SharedAlbumUrl));
			html.append('</div>');
		}
		$get('content').innerHTML = html.toString();
	}
	function pageIndexChanged(sender, e) {
		var userId = '<%= this.AlbumOwner.UserId %>';
		OpenPhotoAlbum.Shared.Albums.GetAlbums(userId, e.pageIndex, true, onGetAlbumsSuccess, onFailed, null);	// reload
	}
	function onFailed(e) { }
	function adjust() {
		if (jQuery.browser.safari) {
			$('table.photoItem').each(function() { $(this).css('display', 'inline-table'); });
		}
		else if (jQuery.browser.mozilla) {
			$('table.photoItem').each(function() { $(this).css('display', 'inline-block'); });
		}
	};
</script>
<div class="album">
	<div id="albums" class="albums">
		<div class="header"><%= StringUtility.Format(Resources.Strings.Shared_Title, this.AlbumOwner.UserName) %></div>
		<div id="content" class="content"></div>
		<div id="pgn" class="pgn"><cc:Paginator ID="pgn" runat="server" PageIndexChanged="pageIndexChanged" /></div>
	</div>
	<div class="albumTitle"><%= HttpUtility.HtmlEncode(this.CurrentAlbum.AlbumTitle) %></div>
	<div id="photos" class="photos"></div>
</div>
<script language="javascript" type="text/javascript">
	function showCaptionProxy(captionElementId, imageElementId) {
		var code = String.format('showCaption(\'{0}\', \'{1}\')', captionElementId, imageElementId);
		setTimeout(code, 400);
	}
	function showCaption(captionElementId, imageElementId) {
		var imageElement = $get(imageElementId);
		var captionElement = $get(captionElementId);
		if (!imageElement || !captionElement) { return; }		
		var offsetImage = $(imageElement).offset();
		var offsetCaption = $(captionElement).offset();
		$(captionElement).css('left', offsetImage.left);
		$(captionElement).width($(imageElement).width() - 4);
		$(captionElement).hide();
		$(captionElement).css('visibility', 'visible');
		$(captionElement).css('top', offsetImage.top + $(imageElement).height() - $(captionElement).height() - 7);
		$(captionElement).fadeIn(200);
	}
</script>
</asp:Content>
